<template>
	<n-layout has-sider sider-placement="right">
		<n-layout-content>
			<div class="flex-col w100 h100">
				<n-tabs
					type="card"
					closable
					v-model:value="$store.chart.pageId"
					size="small"
					class="tabsPage"
					@close="removeTab"
					@update:value="clickTab"
				>
					<n-tab-pane v-for="item in $store.chart.pageTabs" :key="item.id" :tab="item.title" :name="item.id" />
				</n-tabs>
				<!-- 图表拖拽区域 -->
				<div class="f1 h0">
					<router-view v-slot="{ Component }">
						<component :is="Component" :key="$route.path" />
					</router-view>
				</div>
			</div>
		</n-layout-content>
		<n-layout-sider
			collapse-mode="transform"
			:collapsed-width="0"
			:width="350"
			:collapsed="!$store.chart.details"
			:native-scrollbar="false"
			show-trigger="bar"
			@collapse="$store.chart.details = false"
			@expand="$store.chart.details = true"
		>
			<div class="my-content-configurations">
				<!-- 页面配置 -->
				<n-tabs v-if="!$store.chart.targetChart.selectId.length" class="tabs-box h100" size="small" type="segment">
					<n-tab-pane name="pageSetting" size="small" display-directive="show:lazy" class="h100 overflow-y-auto">
						<template #tab>
							<n-space>
								<span>页面配置</span>
								<n-icon size="16" class="icon-position" component="DesktopOutline" />
							</n-space>
						</template>
						<CanvasPage />
					</n-tab-pane>
					<n-tab-pane name="pageValue" size="small" display-directive="show:lazy" class="h100 overflow-y-auto">
						<template #tab>
							<n-space>
								<span>页面数据</span>
								<n-icon size="16" class="icon-position" component="Flash" />
							</n-space>
						</template>
						<CanvasPageData />
					</n-tab-pane>
				</n-tabs>
				<!-- 合并组配置 -->
				<n-tabs
					v-if="$store.chart.getTargetData?.isGroup"
					:value="'Basics'"
					class="tabs-box h100"
					size="small"
					type="segment"
				>
					<!-- 组只有基础配置 -->
					<n-tab-pane name="Basics" size="small" display-directive="show:lazy" class="h100 overflow-y-auto">
						<template #tab>
							<n-space>
								<span>基础</span>
								<n-icon size="16" class="icon-position" component="Eleme" />
							</n-space>
						</template>
						<BasicsSetting />
					</n-tab-pane>
				</n-tabs>
				<!-- 组件配置 -->
				<component
					v-if="$store.chart.targetChart.selectId.length && $store.chart.getTargetData?.name"
					:is="`${$store.chart.getTargetData?.name}Config`"
					:config="$store.chart.getTargetData.orgConfig"
					:id="$store.chart.getTargetData.id"
					:key="$store.chart.getTargetData.id"
				/>
			</div>
		</n-layout-sider>
	</n-layout>
</template>

<script setup>
// 页面配置
import CanvasPage from './CanvasPage/index.vue';
import CanvasPageData from './CanvasPage/data.vue';

/**************************************************************当前编辑站点id ***************************************************************/
const { websiteId } = useRoute().params;
if (websiteId) $store.user.ModuleList(websiteId);

function removeTab(pageId) {
	if ($store.chart.pageTabs.length == 1) return msgInfo('最后一个，不能删除！');

	const index = $store.chart.pageTabs.findIndex((item) => item.id === pageId),
		{ length } = $store.chart.pageTabs,
		last = index === length - 1;
	$store.chart.pageTabs.splice(index, 1);
	const data = $store.chart.pageTabs[last ? index - 1 : index];
	$router.push({
		name: 'ChartHome',
		params: { websiteId, pageId: data.id }
	});
}
function clickTab(pageId) {
	$router.push({
		name: 'ChartHome',
		params: { websiteId, pageId }
	});
}
</script>

<style lang="scss" scoped>
:deep(.n-scrollbar > .n-scrollbar-container > .n-scrollbar-content) {
	height: 100%;
	@include b(content-configurations) {
		overflow: hidden;
		box-sizing: border-box;
		height: 100%;
		background-color: var(--color-bg-2);

		.tabs-box {
			.icon-position {
				padding-top: 2px;
			}
		}
	}
}
.tabsPage {
	:deep() {
		.n-tabs-tab-wrapper .n-tabs-tab {
			--n-tab-padding: 6px 10px !important;
		}
		.n-tab-pane {
			display: none;
		}
	}
}
</style>
